<template>
  <div class="phone2">
    <div ref="chartContainerphone2" style="width: 100%;height: 300px"></div>
  </div>
  <el-dialog :title="state.popupTitle" v-model="state.popVisible" :close-on-click-modal="false" width="100%">
    <table class="mytable">
      <tr>
        <th style="width: 35%">日期</th>
        <th>产量</th>
      </tr>
      <tr>
        <td>2024-04-01</td>
        <td>111吨</td>
      </tr>
      <tr>
        <td>2024-04-02</td>
        <td>145吨</td>
      </tr>
      <tr>
        <td>2024-04-03</td>
        <td>155.6吨</td>
      </tr>
      <tr>
        <td>2024-04-04</td>
        <td>113.8吨</td>
      </tr>
      <tr>
        <td>2024-04-05</td>
        <td>132.2吨</td>
      </tr>
      <tr>
        <td>2024-04-06</td>
        <td>125.2吨</td>
      </tr>
      <tr>
        <td>2024-04-07</td>
        <td>113.2吨</td>
      </tr>
    </table>
    <div style="text-align: center;margin-top: 5px">
      <el-button size="small" type="warning" @click="closePop">
        <el-icon><ele-Close /></el-icon>关闭
      </el-button>
    </div>
  </el-dialog>
</template>

<script setup name="phonePage1_2">
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";
import * as echarts from 'echarts';
const state = reactive({
  popVisible:false,
  popupTitle : '',
})
const chartContainerphone2 = ref(null);
const createCharts = ()=>{
  const chartInstance = echarts.init(chartContainerphone2.value);
  const option = {
    // ECharts 配置项
    title: {
      text: '2024年3月产量统计',
      right:'120px',
      textStyle:{
        color:'#0048ff',
        fontSize:'16px',
        textAlign:'right'
      }
    },
    tooltip: {
      trigger: 'axis',
      triggerOn:'click',
      axisPointer: {
        type: 'shadow'
      },
      formatter: '{b0}: {c0}吨',
    },
    grid: {
      left: '15px',
      top:'10px',
      right: '10px',
      bottom: '2%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['风能装备', '核能装备', '海工装备', '调质钢', '传动装备', '耐磨介质', '核海新材料'],
      axisLine: {   //x轴的样式
        show: false,
        lineStyle: {
          color: "#0048ff",
          width: 1,
          type: "solid"
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel:  {
        interval: 0,
        rotate:40,  //倾斜
        show: true,
        splitNumber: 15,
        textStyle: {
          color: "#4271e8",
          fontSize: '12',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {   //y轴的样式
        show: false,
        lineStyle: {
          color: "rgba(255,255,255,.1	)",
          width: 1,
          type: "solid"
        },
      },
      axisLabel: {
        show:false,
        formatter: '{value}吨',
        textStyle: {
          color: "#ffffff",
          fontSize: '12',
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        }
      }
    },
    series: [{
      name: '产量',
      type: 'bar',
      barWidth:'45%', //柱子宽度
      itemStyle: {
        normal: {
          //color:'#2f89cf',
          color:'#249b9b',
          opacity: 1,
          barBorderRadius: 5,
        }
      },
      label: {
        show: true, // 显示数值
        color:"#4271e8",
        formatter:'{c}吨',
        position: 'top' // 在顶部显示
      },
      data: [5121, 3891, 4132, 2896, 3254, 2877, 4462]
    }]
  };
  chartInstance.setOption(option);

  chartInstance.on('click',function (param){
    state.popupTitle = param.name + '产量统计'
    state.popVisible = true
  })
}

const closePop = ()=>{
  state.popVisible = false
}
onMounted(()=>{
  createCharts();
})
</script>

<style scoped lang="scss">
.phone2{
  border: 1px solid #32a99e;
}
</style>
